<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
         body{
    background-color:#e9e9e9;
}

#box{
   width:1583px
}

.nav{
    width:100%;
    height:3.1875rem;
    background:#40acd0;
}
.nav .nav_box{
    width: 61.25rem;
    height:100%;
    margin:0 auto;
    display:flex;
    align-items: center;
}

.nav .nav_box .logo_text{
    margin-left:0.8rem;
}

.nav .nav_box ul{
    display:flex;
    font-size:0.875rem;
    color:white;
    align-items: center;
    margin-left: 4rem;
}
.nav .nav_box ul li{
    display:flex;
    align-items: center;
    margin-left:0.5625rem;
}
.nav .nav_box ul li a{
    display:flex;
    align-items: center;
    font-size:0.875rem;
    color:white;
}
.nav .nav_box ul li:first-child{
    margin:0px;
}
.nav .nav_box ul li:nth-child(2),.nav .nav_box ul li:nth-child(2){
    margin-left: 1.125rem;
}
.nav .nav_box ul li:nth-child(3){
    margin-left:0.875rem;
}
.nav .nav_box ul li input{
    width:7rem;
    height:1.5rem; 
    border:1px solid #1463a0;
    background:#e9e9e9;
}
.nav .nav_box ul li input[type="image"]{
     width: 4.375rem;
     height: 1.5625rem;
     border:0px;
}
.dao{
    width:100%;
    height: 4.0625rem;
    display:flex;
}
.po{
    width: 100%;
    margin:0 auto;
    display:flex;
    align-items: center;
    
}
.dao .po{
    width: 100%;
    margin:0 auto;
    display:flex;
    align-items: center;
    margin-left: 1rem;
}
.dao .po .op{
    display:flex;
    font-size:0.875rem;
    color:white;
    align-items: center;
    margin-left: 13.5rem;
    padding-top: 1rem;
    
}
.dao .po .op li{
    width: 4.95rem;
    height: 2.8rem;
    display:flex;
    align-items: center;
    font-size:0.875rem;
    color:#676b6e;
    padding-left: 1rem;
    border-right: 1px solid #e2e2e2;
}
.io{
    background-color: #54a7d1;
    margin-left: 1px;
    
}
.io a{
    display:flex;
    color: #fff;
}
.uo{
    display:flex;
    background-color: #fff;
}
.xia{
    width: 60.1rem;
    margin:0 auto;
    display:flex;
    align-items: center;
    background-color: #fff;
    margin-left: 17.05rem;
    margin-top: 1rem;
}
.xia .wei{
    width: 60rem;
    margin:0 auto;
    display:flex;
    align-items: center;
    margin: 0.5rem;
    
    
}
.xia .wei li:nth-child(1){
    font-size: 12px;
    display: flex;
    margin-left: -2rem;
    color: #666666;
}
.xia .wei li:nth-child(2){
    font-size: 12px;
    display: flex;
    color: #666666;
}
.xia .wei li:nth-child(3){
    font-size: 12px;
    display: flex;
    margin-left: 1rem;
    color: #666666;
}
.buo{
    width: 60.1rem;
    margin:0 auto;
    display:flex;
    align-items: center;
    background-color: #fff;
    margin-left: 17.05rem;
    margin-top: 1rem;
}
.buo .buo_you{
    border-right: 1px solid #ebebeb;
    width: 10rem
}
.buo .buo_you p{
    line-height: 2rem;
    margin-top: -0.01rem;
    border-bottom: 2px solid #a9cde4;
    background-color: #f0f6fb;
    color: #3f89c3;
    align-items: center;
    padding-left: 3rem;
    font-size: 15px;
    margin-bottom: -1rem;
}
.buo .buo_you ul{
    width: 10rem;
}
.buo .buo_you ul li{
    margin-left: -0.5rem;
    font-size: 12px;
    padding-top: 0.3rem;
    padding-bottom: 0.7rem;
}
.buo .buo_you ul li a{
    color: #006699;
}
.buo .buo_zuo p:nth-child(1){
    width: 47rem;
    display:flex;
    align-items: center;
    background-color: #f1f0ef;
    padding-left: 1rem;
    margin-top: -5rem;
    margin-left: 1rem;
    line-height: 2.5rem;
    font-size: 15px;
}
.buo .buo_zuo p:nth-child(2){
    width: 46.8rem;
    display:flex;
    align-items: center;
    background-color: #ffffd4;
    padding-left: 1rem;
    margin-left: 1rem;
    line-height:1.5rem;
    border: 1px solid #ffdf99;
    color: #ff4235;
    font-size: 12px;
    margin-top: -0.2rem;
}
.buo .buo_zuo p:nth-child(3){
    align-items: center;
    margin-left: 2rem;
    line-height: 2rem;
    font-size: 12px;
    margin-top: 1rem;
    color: #7f7f7f;
}
.buo .buo_zuo p select{
    width: 7rem;
    height: 1.5rem;
    color: #5f5f5f;
}

.buo .buo_zuo p:nth-child(4){
    align-items: center;
    color: #7f7f7f;
    margin-left: 2rem;
    font-size: 12px;
    margin-bottom: -10rem;

}
.buo .buo_zuo p:nth-child(5){
    width: 4rem;
    height: 1.2rem;
    align-items: center;
    color: #7f7f7f;
    font-size: 12px;
    margin-top: 16rem;
    margin-left: 6rem;
    background-color: #40acd0;
    color: #ecf5f9;
    padding-left: 1rem;
    padding-top: 0.1rem;
}
.input{
    align-items: center;
    margin-bottom: 0rem;   
}
 .weiti{
     width: 57.6rem;
    display: flex;
    margin-left: 17rem;
    color: #666666;
    margin-top: -2rem;
    background-color: #ffffff;
    padding-left: 1rem;
    padding-top: 5rem;
}
 .weiti li{
    margin:0 auto;
    display:flex;
    align-items: center;
    margin: 0.5rem;
    font-size: 12px;
}
 .weiti .di{
    font-size: 14px;
}


.huo{
    width: 60.1rem;
    margin:0 auto;
    display:flex;
    align-items: center;
    background-color: #eef5fd;
    margin-left: 17.05rem;
    margin-top: 1rem;
    color: #888896;
}
.huo li:nth-child(1){
    font-size: 13px;
    margin-left: 35%;
    display: flex;
    align-items: center;
}
.huo li:nth-child(2){
    font-size: 13px;
    display: flex;
    margin-left: 3rem;
    margin-top: 0.5rem;
}
 </style>


    <div class="box">
		<header>
           <div class="nav">
              <div class="nav_box">
                  <img src="images/logo.png" class="logo_text"/>
				  <form action="" method="get">
				  <ul>
					  <li class="io"><a href=""><img src="images/qq登录图.png"/></a></li>
					  <li><label>用户名：<input type="text" name="username"/></label></li>
					  <li><label>密码：<input type="password" name="password"/></label</li>
					  <li><input type="image" src="images/登录.png"/></li>
					  <li><a href="">注册</a></li>
					  <li >|</li>
					  <li><a href="">在线充值</a></li>
					  <li >|</li>
					  <li><a href="">余额提现</a></li>
				  </ul>
				</form>
			  </div>
		   </div>
		</header>
        <section>
        <div class="dao">
            <div class="po">
                <ul class="op">
                    <li class="io"><a><img src="images/图标.png"></a></li>
                    <li class="io"><a>空包下单</a></li>
                    <li class="uo"><a>批发空包</a></li>
                    <li class="uo"><a>加盟代理</a></li>
                    <li class="uo"><a>任务大厅</a></li>
                    <li class="uo"><a>分站加盟</a></li>
                    <li class="uo"><a>教程中心</a></li>
                    <li class="uo"><a>申请底单</a></li>
                    <li class="uo"><a>在线留言</a></li>
                    <li class="uo"><a></a></li>
                </ul>
                </div> 
        </section>

        <section>
            <div class="xia">
               <ul class="wei">
                   <li>文字公告：</li>
                   <li>专专业淘宝发布专业淘宝发布专业淘宝发布专业淘宝发布</li>
                   <li>2013-01-01</li>
               </ul>
            </div>
        </section>

        <section>
            <div class="buo">
                <div class="buo_you">
                    <p>用户中心</p>
                   <ul>
                        <li><a>账户管理</a></li>
                        <li><a>账户管理</a></li>
                        <li><a>账户管理</a></li>
                        <li><a>账户管理</a></li>
                        <li><a>账户管理</a></li>
                        <li><a>账户管理</a></li>
                        <li><a>账户管理</a></li>
                        <li><a>账户管理</a></li>
                        <li><a>账户管理</a></li>
                        <li><a>账户管理</a></li>
                        <li><a>账户管理</a></li>
                    </ul>
                    </div>
                    <div class="buo_zuo">
                        <p>留言板</p>
                        <p>注：下单地址失误的。。。。。。</p>
                        <P>留言类型：
                                 <SELect>
                                    <option >在线充值问题</option>
                                </SELect></P>
                        <P>留言内容：<input  type="" alt=""class="input"></P>
                        <p>马上留言</p>
                    </div>
              </div>
            <div class="rot">
                <ul class="weiti">
                    <li class="di">常用问题：</li>
                    <li>常用问题</li>
                    <li>常用问题</li>
                    <li>常用问题</li>
                    <li>常用问题</li>
                    <li>常用问题</li>
                    <li>常用问题</li>
                    <li>常用问题</li>
                    <li>常用问题</li>
                    <li>常用问题</li>
                    <li>常用问题</li>
                </ul>
            </div>
           
        </section>
        <section>
            <div class="huo">
               <ul>
                   <li>版权所有 &copy; 2001-2014  一点通科技有限公司 Comsenz Inc.</li>
                   <li>官方客服QQ：635806393  电话：18779678216官方会员群：206652739
                       官方代理群：312635478  官方任务群：286181788
                   </li>
               </ul>
            </div>
        </section>
</body>
</html>